<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* ul li {
                color: red;
            }

            ol li {
                color: aqua;
            }

            ol .eat {
                color: blanchedalmond;
            }
            ol li a {
                color: blueviolet;
            } */
            /* div>a {
                color: red;
            } */
            a:link {
                /* 未被访问时的样式设置 */
                text-decoration: none;
            }
            a:visited {
                /* 已被访问后的样式设置 */
                color: blueviolet;
            }
            a:hover {
                /* 悬停 */
                color: aqua;
            }
            a:active {
                /* 点击按钮，未松开 */
                color: black;
            }
        </style>
    </head>
    <body>
        <!-- 复合选择器 -->
        <!-- 后代选择器--元素1+空格+元素2+... 空格{声明}--只针对最后指定的元素 -->
        <!-- <ul>
            <li>吃饭</li>
            <li>吃饭</li>
            <li>吃饭</li>
        </ul>
        <ol>
            <li>吃饭</li>
            <li class = "eat">吃饭</li>
            <li>
                <a href="#">吃饭</a>
            </li>
        </ol> -->
        <!-- 子类选择器--元素1>元素2 {样式声明}--只针对元素2的标签选择器样式，元素2子类不受影响 -->
        <div class="two">
            <a href="#">链接1</a>
            <p><a href="#">链接2</a></p>
        </div>
        <!-- 并集选择器--用于选择多组标签--元素1，元素2 {样式声明} -->
        <!-- 伪类选择器--表示标签状态 标签: 关键字 {样式声明}-->
        <!-- 链接伪类选择器 -->
        <!-- link--链接被访问后标签样式 -->
        <!-- visited--链接未被访问后标签样式 -->
        <!-- hover--悬停链接的标签样式 -->
        <!-- active--点击链接但未松开的标签样式 -->
        <a href="#">不跳转</a>
        <!-- :force伪类选择器--针对表单元素 -->
        <!-- 表单: force -->
    </body>
</html>